<template>
	<el-card
		shadow="always"
		class="h-full"
		:bodyStyle="{
			height: 'calc(100% - 55px)',
			overflowY: 'auto',
		}"
	>
		<template #header>
			<div class="flex items-center justify-between">
				<el-tooltip placement="right-start">
					<div class="cursor-pointer hover:text-primary">
						<span class="mr-1">应用秘钥</span>
						<el-icon><QuestionFilled /></el-icon>
					</div>
					<template #content>
						特别提示: <br />
						上级单位配置数据同步后，下级单位无法重复配置同步。下级如需同步数据，可采用以下方案解决：<br />
						1、由上级收到数据后自行同步给其他下级；<br />
						2、关闭上级同步，下级重新申请同步。
					</template>
				</el-tooltip>
				<el-button type="warning" @click="handleDeleteKey" size="small">删除秘钥</el-button>
			</div>
		</template>
		<el-space direction="vertical" :size="6">
			<div class="flex items-center justify-start">
				<div class="text-info w-[90px] text-right">单位名称：</div>
				<div class="w-[180px] break-all">{{ appInfo.deptName }}</div>
			</div>
			<div class="flex items-center justify-start">
				<div class="text-info w-[90px] text-right">AppKey：</div>
				<div class="w-[180px] break-all">{{ appInfo.appKey }}</div>
			</div>
			<div class="flex items-center justify-start">
				<div class="text-info w-[90px] text-right">AppSecret：</div>
				<div class="w-[180px] break-all">{{ appInfo.appSecret }}</div>
			</div>
			<div class="flex items-center justify-start">
				<div class="text-info w-[90px] text-right">申请时间：</div>
				<div class="w-[180px] break-all">{{ appInfo.createTime }}</div>
			</div>
			<div class="flex items-center justify-start">
				<div class="text-info w-[90px] text-right">订阅方式：</div>
				<div class="w-[180px]">
					<div class="!rounded-[20px] overflow-hidden border-primary border-[1px] flex items-center cursor-pointer">
						<div
							class="flex-1 py-1 text-center hover:bg-primary-light-3 hover:text-white"
							:class="{ 'bg-primary text-white': subscribeType === '1' }"
							@click="handleChange('1')"
						>
							HTTP
						</div>
						<div
							class="flex-1 py-1 text-center hover:bg-primary-light-3 hover:text-white"
							:class="{ 'bg-primary text-white': subscribeType === '2' }"
							@click="handleChange('2')"
						>
							MQ
						</div>
					</div>
				</div>
			</div>
		</el-space>
	</el-card>
</template>

<script setup lang="ts">
import { useMessageBox } from '/@/hooks/message';
import { appInfo } from '../data';
const subscribeType = ref('1');

const handleDeleteKey = async () => {
	try {
		await useMessageBox().confirm('删除后可继续申请订阅功能，确定继续吗？');
	} catch {
		return;
	}
};
const handleChange = async (type: string) => {
	if (type === subscribeType.value) return;
	try {
		await useMessageBox().confirm('确定要修改订阅方式吗？');
	} catch {
		return;
	}
};
</script>

<style lang="scss" scoped></style>
